<template>
	<view>
		<!-- <<button type="default" @click="login">登录</button> -->
		<view class="un-camera" v-if="!captured">
			<camera class="camera" :device-position="position"></camera>
			<view class="camera-tool">
				<view>
					<uni-icons type="flag-filled" size="40"></uni-icons>
				</view>
				<view>
					<view class="snap-shot" @click="snapShot"></view>
				</view>
				<view>
					<uni-icons type="camera-filled" size="40" @click="switchCamera"></uni-icons>
				</view>
			</view>
		</view>
		<view class="un-preview" v-if="captured">
			<image mode="aspectFit" class="preview" :src="photo"></image>
			<view class="preview-tool">
				<button @click="retake">
					<uni-icons type="closeempty">retake</uni-icons>
				</button>
				<button type="primary" @click="confirm">
					<uni-icons type="checkmarkempty">confirm</uni-icons>
				</button>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			ctx: null,
			photo: '',
			captured: false,
			position: 'front'
		};
	},
	mounted() {
		if (!this.ctx) {
			this.ctx = uni.createCameraContext();
		}
	},
	destroyed() {
		if (this.ctx) {
			this.ctx = null;
		}
	},

	onLoad() {
		uni.authorize({
			scope: 'scope.camera',
			success: () => {
				console.log('授权成功');
			},
			fail: () => {
				uni.showModal({
					title: '提示',
					content: '请授权摄像头权限',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting(); // 打开设置页面
						}
					}
				});
			}
		});
	},
	methods: {
		
		snapShot() {
			console.log('开始拍照');

			this.ctx.takePhoto({
				success: (res) => {
					console.log(res);
					this.photo = res.tempImagePath;
					this.captured = true;
				}
			});

			// const res = await this.ctx.takePhoto({})
			// console.log(res);
			// this.photo = res.tempImagePath;
		},
		retake() {
			this.captured = false;
			this.photo = '';
		},
		confirm(){
			console.log("确认获取的照片是",this.photo)
			
			const eventChannel = this.getOpenerEventChannel();
			
			// eventChannel.emit("xxxx")
			// xxxx()
			// eventChannel.emit("onOpen",111)
			uni.navigateBack()
			
			eventChannel.emit("onPageBurn",{
				"photo":this.photo,
				"xxx":222
			})
			// console.log("xxx")
			// somePage.onPageBurn({"photo":this.photo})
		},
		switchCamera() {
			// this.position = this.position === "front" ? "back": "front"
			if (this.position === 'front') {
				this.position = 'back';
			} else if (this.position === 'back') {
				this.position = 'front';
			} else {
			}
		},
		login() {
			console.log('开始登录第一个http请求');

			uni.login({
				provider: 'weixin',
				success: async (res) => {
					console.log('login res', res.code);
					console.log('开始登录的第二个http请求');
					const response = await uni.request({
						// url:'http://192.168.137.1:6060/wx/login?code='+res.code,
						url: 'http://localhost:6060/wx/login?code=' + res.code,
						method: 'put'
						// method:"post",
					});
					console.log(response);
					let token = response.data.data.token;
					uni.setStorageSync('token', token);
				}
			});
		}
	}
};
</script>
<style>
.un-camera {
	background-color: black;
	width: 100%;
	height: 100vh;
	position: relative;
}
.camera {
	width: 100%;
	height: 90%;
}
.camera-tool {
	/* background-color: saddlebrown; */
	height: 160rpx;
	position: absolute;
	/* top: 200rpx; */
	left: 100rpx;
	right: 100rpx;
	bottom: 150rpx;

	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.snap-shot {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.8);
	border: solid 4rpx #fff;
}
.un-preview {
	width: 100%;
	height: 100vh;
}
.preview {
	width: 100%;
	height: 90%;
}
.preview-tool {
	height: 100rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}
</style>
